<script setup>
import { computed, ref } from 'vue';

const tabs = ['全国个人', '基层个人', '协会排名', '基层工会'];
const currentTab = ref(0);

const handleTabClick = (index) => {
  currentTab.value = index;
};

const config = computed(() => {
  let data = [];
  switch (currentTab.value) {
    case 0: {
      data = formatRankingData([
        {
          name: '张三',
          bank: 'xxx分行',
          value: 8976,
          detail: '京资结缘、爱抵港湾"单身青年员工联谊活动',
        },
        {
          name: '李四',
          bank: 'xxx分行',
          value: 8234,
          detail: '京彩之声合唱团委员会',
        },
        {
          name: '王五',
          bank: 'xxx分行',
          value: 7689,
          detail: '总行机关(纳新)',
        },
        {
          name: '赵六',
          bank: 'xxx分行',
          value: 7456,
          detail: '副中心站联谊活动',
        },
        {
          name: '钱七',
          bank: 'xxx分行',
          value: 7001,
          detail: '运动会机关入场式',
        },
        {
          name: '张嘿嘿',
          bank: 'xxx分行',
          value: 999,
          detail: '京资结缘、爱抵港湾"单身青年员工联谊活动',
        },
        {
          name: '李问问',
          bank: 'xxx分行',
          value: 822,
          detail: '京彩之声合唱团委员会',
        },
      ]);
      break;
    }
    case 1: {
      data = formatRankingData([
        {
          name: '张三',
          bank: 'xxx分行',
          value: 8976,
          detail: '京资结缘、爱抵港湾"单身青年员工联谊活动',
        },
        {
          name: '李四',
          bank: 'xxx分行',
          value: 8234,
          detail: '京彩之声合唱团委员会',
        },
        {
          name: '王五',
          bank: 'xxx分行',
          value: 7689,
          detail: '总行机关(纳新)',
        },
        {
          name: '赵六',
          bank: 'xxx分行',
          value: 7456,
          detail: '副中心站联谊活动',
        },
        {
          name: '钱七',
          bank: 'xxx分行',
          value: 7001,
          detail: '运动会机关入场式',
        },
        {
          name: '张嘿嘿',
          bank: 'xxx分行',
          value: 999,
          detail: '京资结缘、爱抵港湾"单身青年员工联谊活动',
        },
        {
          name: '李问问',
          bank: 'xxx分行',
          value: 822,
          detail: '京彩之声合唱团委员会',
        },
      ]);
      break;
    }
    case 2: {
      data = formatRankingData([
        { name: '科技协会', value: 9876 },
        { name: '金融协会', value: 8765 },
        { name: '创新协会', value: 7654 },
        { name: '研发协会', value: 6543 },
        { name: '运营协会', value: 5432 },
      ]);
      break;
    }
    case 3: {
      data = formatRankingData([
        { name: '科技工会', value: 9876 },
        { name: '金融工会', value: 8765 },
        { name: '创新工会', value: 7654 },
        { name: '研发工会', value: 6543 },
        { name: '运营工会', value: 5432 },
      ]);
      break;
    }
    default: {
      data = [];
    }
  }

  return {
    data,
    carousel: 'single',
    waitTime: 2000,
    sort: true,
    valueFormatter: ({ value }) => value.toLocaleString(),
  };
});

const formatRankingData = (data) => {
  if (currentTab.value === 0) {
    return data.map((item) => ({
      name: `${item.name} ${item.bank} ${item.detail.length > 15 ? `${item.detail.slice(0, 15)}...` : item.detail}`,
      value: item.value,
    }));
  }
  return data.map((item) => ({
    name: item.name,
    value: item.value,
  }));
};
</script>

<template>
  <dv-border-box-12 class="box">
    <div class="header">
      <div class="title">积分排行榜</div>
      <div class="tab-container">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab-item"
          :class="[{ active: currentTab === index }]"
          @click="handleTabClick(index)"
        >
          {{ tab }}
        </div>
      </div>
    </div>
    <dv-scroll-ranking-board
      :config="config"
      style="height: calc(100% - 50px)"
    />
  </dv-border-box-12>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  padding: 15px 20px 10px 20px;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;

    .title {
      color: #fff;
      font-size: 16px;
      margin-bottom: 16px;
      margin: 5px 0;
      text-align: center;
    }

    .tab-container {
      display: flex;
      gap: 5px;

      .tab-item {
        color: #fff;
        cursor: pointer;
        padding: 5px 5px;
        border-radius: 4px;
        transition: all 0.3s;
      }

      .tab-item:hover {
        background: rgba(65, 194, 240, 0.3);
      }

      .tab-item.active {
        background: rgba(65, 194, 240, 0.7);
      }
    }
  }
}
</style>
